<script setup lang='ts' >
const props = defineProps<{
    option: object,
    textType: string,
}>()


</script>
<template>
<el-row  class="w-h-100">
    <ul v-if="props.textType === 'Belt'" class="w-100 belt">
        <li>
            <span>{{ $t('wYrSutteucj9moGbDu9e') }}</span>
            <span :class="{ textColor : props.option.wareBeltTotal == 0 }">{{ props.option.wareBeltTotal || 0}}</span>
        </li>
        <li>
            <span>{{ $t('wzmtavYy5Pa1aOs5T_3Ct') }}</span>
            <span :class="{ textColor : props.option.noWareBeltTotal == 0 }">{{props.option.noWareBeltTotal || 0  }}</span>
        </li>
    </ul>
    <ul v-if="props.textType === 'Emotion'" class="w-100 emotion">
        <li>
            <span>{{ $t('tPmILvNSm7RwSmaXetPmE') }}</span>
            <span :class="{ textColor : props.option.angry == 0 }">{{ props.option.angry || 0}}</span>
        </li>
        <li>
            <span>{{ $t('uAuc3Mn29fMcjZLzjwU') }}</span>
            <span :class="{ textColor : props.option.hate == 0 }">{{ props.option.hate || 0}}</span>
        </li>
        <li>
            <span>{{ $t('mq9LrOouw1Tubx6iZytPz') }}</span>
            <span :class="{ textColor : props.option.fear == 0 }">{{props.option.fear || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('mQqJfAbcWgTyEgq2ZLnI') }}</span>
            <span :class="{ textColor : props.option.happy == 0 }">{{props.option.happy || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('mnjPuFl3LmCzjcChUz2f') }}</span>
            <span :class="{ textColor : props.option.sad == 0 }">{{props.option.sad || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('jvAzrz3mkxRIzVpaEj') }}</span>
            <span :class="{ textColor : props.option.amazed == 0 }">{{props.option.amazed || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('7K2O1K7Eqv8nBfAzQvkwq') }}</span>
            <span :class="{ textColor : props.option.neuter == 0 }">{{props.option.neuter || 0  }}</span>
        </li>
    </ul>
    <ul v-if="props.textType === 'SafetyHatClothes'" class="w-100 safetyHatClothes">
        <li>
            <span>{{ $t('5LszsSwgvZXzxcrfp4e') }}</span>
            <span :class="{ textColor : props.option.wareClothesTotal == 0 }">{{ props.option.wareClothesTotal || 0}}</span>
        </li>
        <li>
            <span>{{ $t('suRb6YgYq00v1lf2TuPbH') }}</span>
            <span :class="{ textColor : props.option.noWareClothesTotal == 0 }">{{props.option.noWareClothesTotal || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('xo0ZwVj2QzYu8FLkZSc') }}</span>
            <span :class="{ textColor : props.option.wareHatTotal == 0 }"> {{props.option.wareHatTotal || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('nncAySJhWYd7d8bwG2iR') }}</span>
            <span :class="{ textColor : props.option.noWareHatTotal == 0 }">{{props.option.noWareHatTotal || 0  }}</span>
        </li>
    </ul>
    <ul v-if="props.textType === 'LiftBelt'" class="w-100 liftBelt">
        <li>
            <span>{{ $t('opVlIxCmj2N8JbeewQmw') }}</span>
            <span :class="{ textColor : props.option.wareBeltTotal == 0 }">{{ props.option.wareBeltTotal || 0}}</span>
        </li>
        <li>
            <span>{{ $t('g52x0d9oqx4wzKb1l8oAi') }}</span>
            <span :class="{ textColor : props.option.noWareBeltTotal == 0 }">{{props.option.noWareBeltTotal || 0  }}</span>
        </li>
    </ul>
    <ul v-if="props.textType === 'WellCover'" class="w-100 wellCoverCulvert">
        <li>
            <span>{{ $t('e3ox6pH03znB1gjIgfShK') }}</span>
            <span :class="{ textColor : props.option.noWellCover  == 0 }">{{ props.option.noWellCover  || 0}}</span>
        </li>
        <li>
            <span>{{ $t('y88SeBLg991yI14tZhzJr') }}</span>
            <span :class="{ textColor : props.option.wellCover  == 0 }">{{props.option.wellCover  || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('6zKi8qjO6FytqENV7q8') }}</span>
            <span :class="{ textColor : props.option.noTarget   == 0 }">{{props.option.noTarget  || 0  }}</span>
        </li>
    </ul>
    <ul v-if="props.textType === 'LowerWaterDitch'" class="w-100 wellCoverCulvert">
        <li>
            <span>{{ $t('83GzSrgyhhKiMWwsotJda') }}</span>
            <span :class="{ textColor : props.option.lowerWaterDitchUnblock   == 0 }">{{ props.option.lowerWaterDitchUnblock  || 0}}</span>
        </li>
        <li>
            <span>{{ $t('r66fwbWgutVl7HfGh5Xb') }}</span>
            <span :class="{ textColor : props.option.lowerWaterDitchBlock   == 0 }">{{props.option.lowerWaterDitchBlock  || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('sfz221ISmR5hOx91CLn5Z') }}</span>
            <span :class="{ textColor : props.option.noTarget   == 0 }">{{props.option.noTarget  || 0  }}</span>
        </li>
    </ul>
    <ul v-if="props.textType === 'Drain'" class="w-100 wellCoverCulvert">
        <li>
            <span>{{ $t('qyWnfd3TCagGyucMjXsJ') }}</span>
            <span :class="{ textColor : props.option.sewerUnblock == 0 }">{{ props.option.sewerUnblock || 0}}</span>
        </li>
        <li>
            <span>{{ $t('mlGtjJzhh_2eCXdxI9oia') }}</span>
            <span :class="{ textColor : props.option.sewerBlock == 0 }">{{props.option.sewerBlock || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('sfz221ISmR5hOx91CLn5Z') }}</span>
            <span :class="{ textColor : props.option.noTarget   == 0 }">{{props.option.noTarget  || 0  }}</span>
        </li>
    </ul>
    <ul v-if="props.textType === 'Pool'" class="w-100 wellCoverCulvert">
        <li>
            <span>{{ $t('cg0WeajwuKnjWqbw0cTEm') }}</span>
            <span :class="{ textColor : props.option.lowWater == 0 }">{{ props.option.lowWater  || 0}}</span>
        </li>
        <li>
            <span>{{ $t('hPzy46GceNkojcetVoXeh') }}</span>
            <span :class="{ textColor : props.option.fullWater == 0 }">{{props.option.fullWater  || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('uacoOwKzNjrrnJaLz6sWu') }}</span>
            <span :class="{ textColor : props.option.noTarget == 0 }">{{props.option.noTarget  || 0  }}</span>
        </li>
    </ul>
    <ul v-if="props.textType === 'GarbageHeap'" class="w-100 wellCoverCulvert">
        <li>
            <span>{{ $t('3Qchm2DkV8lCElVvh581l') }}</span>
            <span :class="{ textColor : props.option.garbageOut   == 0 }">{{ props.option.garbageOut  || 0}}</span>
        </li>
        <li>
            <span>{{ $t('fYlBd8ht8M9KzTBIAh0') }}</span>
            <span :class="{ textColor : props.option.normal   == 0 }">{{props.option.normal  || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('rYhBslBIprgD1nPOzyl') }}</span>
            <span :class="{ textColor : props.option.noTarget == 0 }">{{props.option.noTarget  || 0  }}</span>
        </li>
    </ul>
    <ul v-if="props.textType === 'HeadSmoke'" class="w-100 wellCoverCulvert">
        <li>
            <span>{{ $t('nkHoNdelZzjjwp4sYc9om') }}</span>
            <span :class="{ textColor : props.option.smoke == 0 }">{{ props.option.smoke || 0}}</span>
        </li>
        <li>
            <span>{{ $t('vNAbnz814t6WhEzRtMXd') }}</span>
            <span :class="{ textColor : props.option.noSmoke == 0 }">{{props.option.noSmoke || 0  }}</span>
        </li>
    </ul>
    <ul v-if="props.textType === 'Ladder'" class="w-100 wellCoverCulvert">
        <li>
            <span>{{ $t('rzULrMzmih2WlHu8NyJtV') }}</span>
            <span :class="{ textColor : props.option.standard == 0 }">{{ props.option.standard || 0}}</span>
        </li>
        <li>
            <span>{{ $t('29416XxmskzRoGbf7mUC') }}</span>
            <span :class="{ textColor : props.option.nonStandard == 0 }">{{props.option.nonStandard || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('rYhBslBIprgD1nPOzyl') }}</span>
            <span :class="{ textColor : props.option.noTarget == 0 }">{{props.option.noTarget  || 0  }}</span>
        </li>
    </ul>
    <ul v-if="props.textType === 'PointerMeter'" class="w-100 wellCoverCulvert">
        <li>
            <span>{{ $t('shyTKauPyskK603Q9W2lm') }}</span>
            <span :class="{ textColor : props.option.val == 0 }">{{ props.option.val || 0}}</span>
        </li>
        <li>
            <span>{{ $t('rYhBslBIprgD1nPOzyl') }}</span>
            <span :class="{ textColor : props.option.noTarget == 0 }">{{props.option.noTarget  || 0  }}</span>
        </li>
    </ul>

    <ul v-if="props.textType === 'FireExtinguisher'" class="w-100 wellCoverCulvert">
        <li>
            <span>{{ $t('fYlBd8ht8M9KzTBIAh0') }}</span>
            <span :class="{ textColor : props.option.normal == 0 }">{{ props.option.normal || 0}}</span>
        </li>
        <li>
            <span>{{ $t('qUpAk6qjAoi6FkpVIeEeH') }}</span>
            <span :class="{ textColor : props.option.anomaly == 0 }">{{props.option.anomaly || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('gEpHabLpzbJVta3wefT') }}</span>
            <span v-if="props.option.scene === 2">{{ $t('ammTf1g3daKpr2WnO3g_0') || ''}}</span>
            <span v-if="props.option.scene === 3">{{ $t('2Lxrk2SpqvFuP3Cn2Ckv') || ''}}</span>
            <span v-if="props.option.scene === 4">{{ $t('ot1J4ZGzD2Zj4Dg5VdR') || ''}}</span>
            <span v-if="props.option.scene === 5">{{ $t('j602a0UEzdFdh2h6yWrkb') || ''}}</span>
        </li>
    </ul>
    <ul v-if="props.textType === 'Pothole'" class="w-100 wellCoverCulvert">
        <li>
            <span>{{ $t('5iXqZtEp4uucS9P7SmrnF') }}</span>
            <span :class="{ textColor : props.option.pothole == 0 }">{{ props.option.pothole || 0}}</span>
        </li>
        <li>
            <span>{{ $t('rBVnpXet6DMenmLqaarDi') }}</span>
            <span :class="{ textColor : props.option.nonPothole == 0 }">{{props.option.nonPothole  || 0  }}</span>
        </li>
    </ul>
    <ul v-if="props.textType === 'Staircase'" class="w-100 wellCoverCulvert">
        <li>
            <span>{{ $t('gVkf4MPvNzyQq7Fshrrzw') }}</span>
            <span :class="{ textColor : props.option.staircase == 0 }">{{ props.option.staircase || 0}}</span>
        </li>
        <li>
            <span>{{ $t('4kH9My3sTT37Jft_5P') }}</span>
            <span :class="{ textColor : props.option.nonStaircase == 0 }">{{ props.option.nonStaircase || 0}}</span>
        </li>
        <li>
            <span>{{ $t('rYhBslBIprgD1nPOzyl') }}</span>
            <span :class="{ textColor : props.option.noTarget == 0 }">{{props.option.noTarget  || 0  }}</span>
        </li>
    </ul>

    <ul v-if="props.textType === 'Lichenous'" class="w-100 wellCoverCulvert">
        <li>
            <span>{{ $t('j9CGtUowLHuI6qKdFrWh') }}</span>
            <span :class="{ textColor : props.option.lichenous == 0 }">{{ props.option.lichenous || 0}}</span>
        </li>
        <li>
            <span>{{ $t('h8b9ZqP_6goz_8Tzmp75') }}</span>
            <span :class="{ textColor : props.option.nonLichenous  == 0 }">{{ props.option.nonLichenous  || 0}}</span>
        </li>
    </ul>

    <ul v-if="props.textType === 'RustWater'" class="w-100 safetyHatClothes">
        <li>
            <span>{{ $t('aiGk63tzIa3F1Ek3l5k3f') }}</span>
            <span :class="{ textColor : props.option.rust == 0 }">{{ props.option.rust || 0}}</span>
        </li>
        <li>
            <span>{{ $t('hHqmJRmAirIod2h5qbZI') }}</span>
            <span :class="{ textColor : props.option.nonRust == 0 }">{{props.option.nonRust || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('dJ6K2rEcn2h0WplroYU') }}</span>
            <span :class="{ textColor : props.option.water == 0 }"> {{props.option.water || 0  }}</span>
        </li>
        <li>
            <span>{{ $t('f4V7q4fRMfZxQycw6AZpZ') }}</span>
            <span :class="{ textColor : props.option.nonWater == 0 }">{{props.option.nonWater || 0  }}</span>
        </li>
    </ul>
    <ul v-if="props.textType === 'Badge'" class="w-100 wellCoverCulvert">
        <li>
            <span> {{ $t('tLzDsl6ItssRvvCNh68A') }}</span>
            <span :class="{ textColor : props.option.wearBadge == 0 }">{{ props.option.wearBadge || 0}}</span>
        </li>
       
    </ul>

    <ul v-if="props.textType === 'Crack'" class="w-100 wellCoverCulvert">
        <li>
            <span> {{ $t('0GjZl0Yd69J6QeoxeJb75') }}</span>
            <span :class="{ textColor : props.option.crackNum == 0 }">{{ props.option.crackNum || 0}}</span>
        </li>
    </ul>
</el-row>
</template>
<style lang="scss" scoped>
*{
    list-style-type: none;
    list-style: none;
}

.liftBelt,
.wellCoverCulvert,
.belt,
.emotion,
.safetyHatClothes{
    li{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 10px;
        align-items: center;
        line-height: 56px;
        font-size: 12px;
        text-align: left;
        span{
            color: red;
            &:nth-child(1){
                color: #81A3AC;
            }
            &:nth-child(2){
                margin-right: 20px;
                color: #00FFFD;
            }
        }
        .textColor{
            color: red !important;
        }
    }
}

.emotion{
    li{
        line-height: 22px;
    }
}

// 2\3
.belt,
.wellCoverCulvert{
    li{
        font-size: 16px;
        line-height: 40px;
    }
}
// 4
.safetyHatClothes{
    li{
        font-size: 14px;
        line-height: 36px;
    }

}

</style>